import React from 'react';
import { 
  UploadOutlined, 
  DownloadOutlined,
  AppstoreOutlined
} from '@ant-design/icons';

const WorkflowStep = ({ number, title, description, icon, isReverse, children }) => (
  <div className="relative mb-12 md:mb-16 fade-in">
    <div className={`md:flex items-center ${isReverse ? 'flex-row-reverse' : ''}`}>
      <div className={`md:w-1/2 ${isReverse ? 'md:pl-12' : 'md:pr-12'} mb-6 md:mb-0 ${isReverse ? 'md:text-left' : 'md:text-right'}`}>
        <div className={`inline-flex items-center justify-center w-12 h-12 rounded-full ${
          number === 1 ? 'bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400' :
          number === 2 ? 'bg-secondary-100 dark:bg-secondary-900 text-secondary-600 dark:text-secondary-400' :
          'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400'
        } shadow-md mb-4`}>
          <span className="text-xl font-bold">{number}</span>
        </div>
        <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">{title}</h3>
        <p className="text-gray-600 dark:text-gray-300">{description}</p>
      </div>
      <div className={`md:w-1/2 ${isReverse ? 'md:pr-12' : 'md:pl-12'}`}>
        {children}
      </div>
    </div>
  </div>
);

const WindowFrame = ({ children }) => (
  <div className="bg-white dark:bg-gray-700 rounded-xl shadow-sm border border-gray-200 dark:border-gray-600 overflow-hidden">
    <div className="p-4 bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-500">
      <div className="flex items-center space-x-2">
        <div className="w-3 h-3 rounded-full bg-red-500"></div>
        <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
        <div className="w-3 h-3 rounded-full bg-green-500"></div>
      </div>
    </div>
    <div className="p-6">
      {children}
    </div>
  </div>
);

const WorkflowSection = () => {
  return (
    <section id="workflow" className="py-16 bg-gray-50 dark:bg-gray-800">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16 fade-in">
          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">简单三步，完成创作</h2>
          <p className="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">图灵画匠的使用流程简单直观，让您专注于创意而非技术</p>
        </div>
        
        <div className="max-w-4xl mx-auto">
          <div className="relative">
            {/* Timeline */}
            <div className="hidden md:block absolute left-1/2 top-0 h-full w-0.5 bg-gray-200 dark:bg-gray-600 transform -translate-x-1/2"></div>
            
            {/* Step 1: Upload */}
            <WorkflowStep 
              number={1} 
              title="上传图片" 
              description="点击上传或直接拖放您的图片到指定区域，支持JPEG、PNG、WebP格式"
              icon={<UploadOutlined />}
            >
              <WindowFrame>
                <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded flex items-center justify-center">
                  <UploadOutlined className="text-3xl text-gray-400 dark:text-gray-500" />
                </div>
                <div className="mt-4 text-center">
                  <button className="text-sm px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg">选择图片</button>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">或拖放图片到此处</p>
                </div>
              </WindowFrame>
            </WorkflowStep>
            
            {/* Step 2: Style Selection */}
            <WorkflowStep 
              number={2} 
              title="选择风格" 
              description="从多种预设艺术风格中选择您喜欢的，或通过文字描述定制独特效果"
              icon={<AppstoreOutlined />}
              isReverse
            >
              <WindowFrame>
                <div className="grid grid-cols-3 gap-2">
                  {[...Array(6)].map((_, i) => (
                    <div 
                      key={i} 
                      className={`aspect-square rounded flex items-center justify-center cursor-pointer ${
                        i === 0 ? 'bg-blue-100 dark:bg-blue-900 border-2 border-blue-300 dark:border-blue-700' :
                        'bg-gray-100 dark:bg-gray-600 hover:border-2 hover:border-gray-300 dark:hover:border-gray-700'
                      }`}
                    >
                      <AppstoreOutlined className={`text-xl ${
                        i === 0 ? 'text-blue-600 dark:text-blue-300' : 'text-gray-400 dark:text-gray-300'
                      }`} />
                    </div>
                  ))}
                </div>
                <div className="mt-4">
                  <input 
                    type="text" 
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-200" 
                    placeholder="或用文字描述您想要的风格..."
                  />
                </div>
              </WindowFrame>
            </WorkflowStep>
            
            {/* Step 3: Generate & Download */}
            <WorkflowStep 
              number={3} 
              title="生成与下载" 
              description="AI快速处理您的图片，10-30秒内完成风格转换，一键下载高质量结果"
              icon={<DownloadOutlined />}
            >
              <WindowFrame>
                <div className="flex space-x-4 mb-4">
                  <div className="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                    <div className="aspect-square bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
                      <i className="fas fa-image text-xl text-gray-400 dark:text-gray-500"></i>
                    </div>
                  </div>
                  <div className="w-1/2 border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                    <div className="aspect-square bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                      <i className="fas fa-mountain-sun text-xl text-white"></i>
                    </div>
                  </div>
                </div>
                
                {/* Progress bar */}
                <div className="mb-4">
                  <div className="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                    <div className="h-full bg-primary-600 rounded-full w-3/4"></div>
                  </div>
                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 flex justify-between">
                    <span>处理中...</span>
                    <span>75%</span>
                  </div>
                </div>
                
                <button className="w-full py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg flex items-center justify-center">
                  <DownloadOutlined className="mr-2" /> 下载图像
                </button>
              </WindowFrame>
            </WorkflowStep>
          </div>
        </div>
      </div>
    </section>
  );
};

export default WorkflowSection; 